<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头部</title>
    <!-- reset css -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./font_4638144_3xkpmwuskx9/iconfont.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="page menu">
            <div class="left-area">
                <ul>
                    <li class="iconfont icon-tushu">

                    </li>
                    <li>
                        在这里全站搜索
                    </li>
                    <li class="iconfont icon-fangdajing">

                    </li>
                    <li class="iconfont icon-tushu">
                        授权查询
                    </li>
                    <li class="iconfont icon-weixin">
                        联系官方
                    </li>
                </ul>
            </div>
            <div class="right-area">
                <ul>
                    <li>
                        <span>技术咨询</span>
                    </li>
                    <li>
                        <span>程序故障/BUG反馈</span>
                    </li>
                    <li>
                        <span class="iconfont icon-weixin">微信登录</span>
                    </li>
                    <li>
                        <span>用户登录</span>
                    </li>
                    <li>
                        <span>用户注册</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- header -->
    <div class="header">
        <div class="header-in container cf">
            <h1 class="logo fl"><a href="#">网站logo</a></h1>
            <div class="fr">
                <ul class="ufl cf">
                    <li><a href="#">产品动态</a></li>
                    <li><a href="#">产品动态</a></li>
                    <li><a href="#">产品动态</a></li>
                    <li><a href="#">产品动态</a></li>
                    <li><a href="#">产品动态</a></li>
                    <li><a href="#">产品动态</a></li>
                    <li><a href="#">产品动态</a></li>
                    <li><a href="#">产品动态</a></li>
                    <li class="c-btn"><a href="#">控制台</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- advertise -->

    <div class="advertise">
        <div class="advertise-in">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./images/2.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./images/4.jpg" alt=""></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="adv-tags">
                <div class="adv-tags-item">
                    <i class="iconfont icon-git"></i>
                    <div class="a">免费开源</div>
                    <div>MIT开源协议，免费且不限商用</div>
                </div>
                <div class="adv-tags-item">
                    <i class="iconfont icon-gengxin"></i>
                    <div class="a">持久更新</div>
                    <div>版本持续迭代，避免漏洞入侵</div>
                </div>
                <div class="adv-tags-item">
                    <i class="iconfont icon-tuandui"></i>
                    <div class="a">专业技术团队</div>
                    <div>有问必答，保障快速技术服务</div>
                </div>
                <div class="adv-tags-item">
                    <i class="iconfont icon-wanfabiaoqian"></i>
                    <div class="a">应用丰富</div>
                    <div>海量应用插件，按需安装使用</div>
                </div>
            </div>
        </div>
    </div>

    <!-- guide-overview -->
    <div class="guide-overview">
        <div class="guide-ov-in">
            <div class="down">
                <a href="#">下载迅睿CMS程序源码</a>
            </div>
            <p class="cms-doc">
                <span class="iconfont icon-gouwuche"></span>
                <a href="">
                    CMS介绍文档
                </a>
                <span>|</span>
                <span class="iconfont icon-weixin"></span>
                <a href="">
                    官方技术QQ群
                </a>
            </p>
            <div class="guide-video">
                <video width="720" height="405" controls>
                    <source src="./images/1.0.mp4" type="video/mp4">
                </video>
            </div>
        </div>
    </div>

    <!-- service -->
    <div class="service">
        <div class="service-in container">
            <div class="section_header">
                <h2>我们能够为您做的</h2>
                <p>以成熟稳定的迅睿CMS系统为基础，帮助客户在互联网推广自己的产品、服务和品牌，为客户创造价值从而实现自身价值！</p>
            </div>
            <div class="service-items">
                <div class="service-items-l">
                    <i class="iconfont icon-guge"></i>
                    <div class="ziti">品牌网站设计</div>
                    <p>
                        企业公司网站、品牌网站、外贸网站、集团网站、营销型网站、响应式网站
                    </p>
                </div>
                <div class="service-items-l">
                    <i class="iconfont icon-gouwuche"></i>
                    <div class="ziti">品牌网站设计</div>
                    <p>
                        企业公司网站、品牌网站、外贸网站、集团网站、营销型网站、响应式网站
                    </p>
                </div>
                <div class="service-items-l">
                    <i class="iconfont icon-HTML"></i>
                    <div class="ziti">品牌网站设计</div>
                    <p>
                        企业公司网站、品牌网站、外贸网站、集团网站、营销型网站、响应式网站
                    </p>
                </div>
                <div class="service-items-l">
                    <i class="iconfont icon-weixin"></i>
                    <div class="ziti">品牌网站设计</div>
                    <p>
                        企业公司网站、品牌网站、外贸网站、集团网站、营销型网站、响应式网站
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- product-dynamics -->
    <div class="product-dynamics">
        <div class="container">
            <div class="section_header">
                <h2>我们能够为您做的</h2>
                <p>以成熟稳定的迅睿CMS系统为基础，帮助客户在互联网推广自己的产品、服务和品牌，为客户创造价值从而实现自身价值！</p>
            </div>
            <div class="pro-d-items cf">
                <div class="fl">
                    <div class="pro-item-l">
                        <div class="title">
                            <strong>官方公告</strong>
                            <a>更多></a>
                        </div>
                        <ul>
                            <li>
                                <span class="topid">1</span>
                                根据季节开挖为u和我而聚集到佛牌
                                <span>2018-09-01</span>
                            </li>
                            <li>
                                <span class="topid">2</span>
                                根据季节开挖为u和我而聚集到佛牌
                                <span>2018-09-01</span>
                            </li>
                            <li>
                                <span class="topid">3</span>
                                根据季节开挖为u和我而聚集到佛牌
                                <span>2018-09-01</span>
                            </li>
                            <li>
                                <span class="topid">4</span>
                                <a>根据季节开挖为u和我而聚集到佛牌</a>
                                <span>2018-09-01</span>
                            </li>
                            <li>
                                <span class="topid">5</span>
                                <a>根据季节开挖为u和我而聚集到佛牌</a>
                                <span>2018-09-01</span>
                            </li>
                            <li>
                                <span class="topid">6</span>
                                <a>根据季节开挖为u和我而聚集到佛牌</a>
                                <span>2018-09-01</span>
                            </li>

                        </ul>
                    </div>
                    <div class="pro-item-l">
                        <div class="title">
                            <strong>疑难解惑</strong>
                            <a>更多></a>
                        </div>
                        <ul>
                            <li>
                                <!-- <span class="topid">1</span> -->
                                <a>根据季节开挖为u和我而聚集到佛牌</a>
                                <span>2018-09-01</span>
                            </li>
                            <li>
                                <!-- <span class="topid">2</span> -->
                                <a>根据季节开挖为u和我而聚集到佛牌</a>
                                <span>2018-09-01</span>
                            </li>
                            <li>
                                <!-- <span class="topid">3</span> -->
                                <a>根据季节开挖为u和我而聚集到佛牌</a>
                                <span>2018-09-01</span>
                            </li>
                            <li>
                                <!-- <span class="topid">4</span> -->
                                <a>根据季节开挖为u和我而聚集到佛牌</a>
                                <span>2018-09-01</span>
                            </li>
                            <li>
                                <!-- <span class="topid">5</span> -->
                                <a>根据季节开挖为u和我而聚集到佛牌</a>
                                <span>2018-09-01</span>
                            </li>
                            <li>
                                <!-- <span class="topid">6</span> -->
                                <a>根据季节开挖为u和我而聚集到佛牌</a>
                                <span>2018-09-01</span>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="fr pro-item-l">
                    <div class="title">
                        <strong>特色功能</strong>
                        <a>更多></a>
                    </div>
                    <ul class="ul">
                        <li class="r">
                            <div class="fl">
                                <img src="./images/2.jpg" alt="">
                            </div>
                            <div class="wenzi">
                                <h3>好可爱的</h3>
                                建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面
                            </div>
                        </li>
                        <li class="r">
                            <div class="fl">
                                <img src="./images/2.jpg" alt="">
                            </div>
                            <div class="wenzi">
                                <h3>好可爱的</h3>
                                建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面
                            </div>
                        </li>
                        <li class="r">
                            <div class="fl">
                                <img src="./images/2.jpg" alt="">
                            </div>
                            <div class="wenzi">
                                <h3>好可爱的</h3>
                                建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面建设单位看看对面
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- hot-app -->
    <div class="hot-app">
        <div class="container">
            <div class="section_header">
                <h2>迅睿CMS精选应用</h2>
                <p>以成熟稳定的迅睿CMS系统为基础，帮助客户在</p>
            </div>
            <div class="hot-app-list">
                <div class="hot-app-list-in">
                    <ul class="cf">
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <div class="right">
                                <div class="top">的积分</div>
                                <p>粉红色佛i发从沙发上好红哦就</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="btn">
            <button>更多应用插件</button>
        </div>
    </div>

    <!-- bottom -->
    <div class="footer-top">
        <div class=" bb">
            <ul>
                <li>友情链接：</li>
                <li>cms系统</li>
                <li>cms下载</li>
                <li>cms源码</li>
                <li>企业建站cms</li>
                <li>迅睿cms下载</li>
                <li>seo优化</li>
                <li>147免费采集发布</li>
                <li>简单采集器</li>
            </ul>
        </div>
    </div>

    <!-- footer -->
    <div class="footer">
        <div class="footer-in container">
            <div class="links cf">
                <dl>
                    <dt>联系我们</dt>
                    <dd><a href="#">联系我们</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
                <dl class="tuijian">
                    <dt>推荐产品</dt>
                    <dd><a href="#">api接口</a></dd>
                    <dd><a href="#">api接口</a></dd>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                </dl>
                <dl class="tuijian">
                    <dt></dt>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">api接口</a></dd>
                </dl>
                <dl class="tuijian">
                    <dt></dt>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">kws 关键词搜索词调用</a></dd>
                    <dd><a href="#">api接口</a></dd>
                    <dd><a href="#">api接口</a></dd>
                </dl>
                <dl class="fr">
                    <dt>常见问题</dt>
                    <dd><a href="#">莫名其妙的网址变成这样，是哪里出问题了吗？多</a></dd>
                    <dd><a href="#">查询范围是所有导入表格数据</a></dd>
                    <dd><a href="#">莫名其妙的网址变成这样，是哪里出问题了吗？多</a></dd>
                    <dd><a href="#">莫名其妙的网址变成这样，是哪里出问题了吗？多</a></dd>
                    <dd><a href="#">查询范围是所有导入表格数据</a></dd>
                    <dd><a href="#">查询范围是所有导入表格数据</a></dd>
                </dl>
            </div>
            <div class="copyright">
                <p>XunRuiCMS基于MIT开源协议发布，免费且不限制商业使用</p>
                <p>Copyright © 四川迅睿云软件开发有限公司 蜀ICP备19023384号 川公网安备 51010602001037号 增值电信业务经营许可证 川B2-20211858 营业执照</p>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script>
        // 轮播
        window.addEventListener('load', function () {
            var swiper = new Swiper(".mySwiper", {
                loop: true,//循环模式选项
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },//3秒后自动播放
                initialSlide: 0, //初始化时active的slide的index
                // effect: "fade", //切换效果
                // speed: 1000, //切换速度
                pagination: {
                    el: ".swiper-pagination",
                },
            });
        }); 
        // 导航栏吸顶
        window.addEventListener('scroll', function () {
            const headerEl = document.querySelector('.header')
            if (window.scrollY >= 40) {
                headerEl.style.position = 'fixed';
                headerEl.style.top = '0';
                headerEl.style.left = '0';
                headerEl.style.right = '0';
                headerEl.style.zIndex = '9999';
                headerEl.style.backgroundColor = '#fff';
                headerEl.style.marginTop = '0'
            } else {
                headerEl.style.position = 'relative';
                headerEl.style.top = '0';
            }
        })

    </script>

</body>

</html>